﻿@{
    Layout = Layouts.ClientPopUp;
    Style.Reqiured("style-editor").AtHead();
    Script.Reqiured("style-editor").AtFoot();
    Script.Reqiured("slimscroll").AtFoot();
}

<div class="editor-main clearfix">
    <div class="examples">
        <div id="accordion2">
            <fieldset>
                <legend>@L("背景")</legend>
                <div class="column">
                    <div class="input-group">
                        <span class="input-group-addon">@L("颜色")</span>
                        <input class="form-control color-picker" id="b-color" type="text" onchange="updateDisplay()" />
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">@L("重复")</span>
                        <select class="form-control" onchange="updateDisplay()" id="background-repeat">
                            <option value="">@L("默认")</option>
                            <option value="repeat">@L("重复")</option>
                            <option value="repeat-x">@L("水平重复")</option>
                            <option value="repeat-y">@L("垂直重复")</option>
                            <option value="no-repeat">@L("不重复")</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("大小")</span>
                        <select class="form-control" onchange="updateDisplay()" id="background-size">
                            <option value="">@L("默认")</option>
                            <option value="contain">@L("容纳")</option>
                            <option value="cover">@L("覆盖")</option>
                        </select>
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">@L("位置")</span>
                        <select class="form-control" onchange="updateDisplay()" id="background-position">
                            <option value="">@L("默认")</option>
                            <option value="center">@L("居中")</option>
                            <option value="top">@L("顶部对齐")</option>
                            <option value="bottom">@L("底部对齐")</option>
                            <option value="left">@L("左对齐")</option>
                            <option value="right">@L("右对齐")</option>
                            <option value="left top">@L("左上对齐")</option>
                            <option value="right top">@L("右上对齐")</option>
                            <option value="left bottom">@L("左下对齐")</option>
                            <option value="right bottom">@L("右下对齐")</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("固定")</span>
                        <select class="form-control" onchange="updateDisplay()" id="background-attachment">
                            <option value="">@L("默认")</option>
                            <option value="fixed">@L("固定")</option>
                            <option value="scroll">@L("滚动")</option>
                        </select>
                    </div>
                </div>
                <div>
                    <div class="input-group loading">
                        <span class="input-group-addon">@L("背景图")</span>
                        <input type="text" class="form-control" data-url="/admin/Media/Select" onchange="updateDisplay()" id="background-image" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("自定义")</span>
                        <input type="text" class="form-control" onchange="updateDisplay()" id="background" />
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    @L("文本")
                </legend>
                <div class="column">
                    <div class="input-group">
                        <span class="input-group-addon">@L("颜色")</span>
                        <input class="form-control color-picker" id="t-color" type="text" onchange="updateDisplay()" />
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">@L("对齐")</span>
                        <select class="form-control" onchange="updateDisplay()" id="text-align">
                            <option value="">@L("默认")</option>
                            <option value="left">@L("左对齐")</option>
                            <option value="right">@L("右对齐")</option>
                            <option value="center">@L("居中")</option>
                            <option value="justify">@L("两端对齐")</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("修饰")</span>
                        <select class="form-control" onchange="updateDisplay()" id="text-decoration">
                            <option value="">@L("默认")</option>
                            <option value="none">@L("无")</option>
                            <option value="underline">@L("底线")</option>
                            <option value="overline">@L("顶线")</option>
                            <option value="underline overline">@L("上下线")</option>
                            <option value="line-through">@L("中线")</option>
                            <option value="blink">@L("闪烁")</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("大小写")</span>
                        <select class="form-control" onchange="updateDisplay()" id="text-transform">
                            <option value="">@L("默认")</option>
                            <option value="none">无</option>
                            <option value="capitalize">@L("首字母大写")</option>
                            <option value="lowercase">@L("小写")</option>
                            <option value="uppercase">@L("大写")</option>
                        </select>
                    </div>
                </div>
                <div>
                    <p>
                        <label for="text-indent">@L("缩进"):</label>
                        <strong class="text-info"><span id="text-indent">0</span>px</strong>
                    </p>
                    <div id="slider_text-indent" class="slider fontsize">
                    </div>
                    <p>
                        <label for="letter-spacing">@L("间距"):</label>
                        <strong class="text-info"><span id="letter-spacing">0</span>px</strong>
                    </p>
                    <div id="slider_letter-spacing" class="slider border">
                    </div>
                    <p>
                        <label for="word-spacing">@L("字间距"):</label>
                        <strong class="text-info"><span id="word-spacing">0</span>px</strong>
                    </p>
                    <div id="slider_word-spacing" class="slider border">
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    @L("边距")
                </legend>
                <div>
                    <p>
                        <label for="padding">@L("内边距"):</label>
                        <strong class="text-info"><span id="padding">0</span>px</strong>
                    </p>
                    <div id="slider_padding" class="slider padding">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("自定义")</span>
                        <input type="text" class="form-control" id="padding-custom" onchange="updateDisplay()" />
                    </div>
                    <p>
                        <label for="margin">@L("外边距"):</label>
                        <strong class="text-info"><span id="margin">0</span>px</strong>
                    </p>
                    <div id="slider_margin" class="slider padding">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("自定义")</span>
                        <input type="text" class="form-control" id="margin-custom" onchange="updateDisplay()" />
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    @L("宽 / 高")
                </legend>
                <div class="column">
                    <div class="input-group">
                        <span class="input-group-addon">@L("宽(px)")</span>
                        <input class="form-control" id="width" type="text" onchange="updateDisplay()" />
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("高(px)")</span>
                        <input type="text" class="form-control" onchange="updateDisplay()" id="height" />
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    @L("边框")
                </legend>
                <div>
                    <p>
                        <label for="border-width">@L("大小"):</label>
                        <strong class="text-info"><span id="border-width">0</span>px</strong>
                    </p>
                    <div id="slider_border-width" class="slider border">
                    </div>
                    <div class="column">
                        <div class="input-group">
                            <span class="input-group-addon">@L("颜色")</span>
                            <input class="form-control color-picker" id="bc-color" type="text" onchange="updateDisplay()" />
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">@L("样式")</span>
                            <select class="form-control" onchange="updateDisplay()" id="border-style">
                                <option value="solid">@L("实线")</option>
                                <option value="dashed">@L("虚线")</option>
                                <option value="dotted">@L("点划线")</option>
                                <option value="double">@L("双线")</option>
                                <option value="groove">@L("凹槽")</option>
                                <option value="inset">@L("内嵌")</option>
                                <option value="outset">@L("外嵌")</option>
                                <option value="ridge">@L("屋脊")</option>
                            </select>
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    @L("字体")
                </legend>
                <div class="column">
                    <div class="input-group">
                        <span class="input-group-addon">@L("字体")</span>
                        <select class="form-control" onchange="updateDisplay()" id="font-name">
                            <option value="">@L("默认")</option>
                            <option value="arial">Arial</option>
                            <option value="'arial black'">Arial Black</option>
                            <option value="'comic sans ms'">Comic Sans MS</option>
                            <option value="'courier new'">Courier New</option>
                            <option value="georgia">Georgia</option>
                            <option value="helvetica">Helvetica</option>
                            <option value="impact">Impact</option>
                            <option value="'times new roman'">Times New Roman</option>
                            <option value="'trebuchet ms'">Trebuchet MS</option>
                            <option value="verdana">Verdana</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("样式")</span>
                        <select class="form-control" onchange="updateDisplay()" id="font-style">
                            <option value="">@L("默认")</option>
                            <option value="normal">@L("正常")</option>
                            <option value="italic">@L("斜体")</option>
                            <option value="oblique">@L("倾斜")</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("加粗")</span>
                        <select class="form-control" onchange="updateDisplay()" id="font-weight">
                            <option value="">@L("默认")</option>
                            <option value="normal">@L("正常")</option>
                            <option value="bold">@L("粗体")</option>
                            <option value="bolder">@L("特粗体")</option>
                            <option value="lighter">@L("轻加粗")</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("大写")</span>
                        <select class="form-control" onchange="updateDisplay()" id="font-variant">
                            <option value="">@L("默认")</option>
                            <option value="normal">@L("正常")</option>
                            <option value="small-caps">@L("小型")</option>
                        </select>
                    </div>
                    <p>
                        <label for="font-size">@L("大小"):</label>
                        <strong class="text-info"><span id="font-size">0</span>px</strong>
                    </p>
                    <div id="slider_font-size" class="slider fontsize">
                    </div>
                    <p>
                        <label for="line-height">@L("行高"):</label>
                        <strong class="text-info"><span id="line-height">0</span>px</strong>
                    </p>
                    <div id="slider_line-height" class="slider padding">
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    @L("阴影")
                </legend>
                <div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("颜色")</span>
                        <input class="form-control color-picker" id="box-s-color" type="text" onchange="updateDisplay()" />
                    </div>
                    <p>
                        <label for="box-h-length">@L("水平大小"):</label>
                        <strong class="text-info"><span id="box-h-length">0</span>px</strong>
                    </p>
                    <div id="slider_box-h-length" class="slider border">
                    </div>
                    <p>
                        <label for="box-v-length">@L("垂直大小"):</label>
                        <strong class="text-info"><span id="box-v-length">0</span>px</strong>
                    </p>
                    <div id="slider_box-v-length" class="slider border">
                    </div>
                    <p>
                        <label for="box-b-length">@L("模糊"):</label>
                        <strong class="text-info"><span id="box-b-length">0</span>px</strong>
                    </p>
                    <div id="slider_box-b-length" class="slider border">
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    @L("文字阴影")
                </legend>
                <div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("颜色")</span>
                        <input class="form-control color-picker" id="text-s-color" type="text" onchange="updateDisplay()" />
                    </div>
                    <p>
                        <label for="text-h-length">@L("水平大小"):</label>
                        <strong class="text-info"><span id="text-h-length">0</span>px</strong>
                    </p>
                    <div id="slider_text-h-length" class="slider border">
                    </div>
                    <p>
                        <label for="text-v-length">@L("垂直大小"):</label>
                        <strong class="text-info"><span id="text-v-length">0</span>px</strong>
                    </p>
                    <div id="slider_text-v-length" class="slider border">
                    </div>
                    <p>
                        <label for="text-b-length">@L("模糊"):</label>
                        <strong class="text-info"><span id="text-b-length">0</span>px</strong>
                    </p>
                    <div id="slider_text-b-length" class="slider border">
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    @L("圆角")
                </legend>
                <div>
                    <p>
                        <label for="border-radius">@L("大小"):</label>
                        <strong class="text-info"><span id="border-radius">0</span>px</strong>
                    </p>
                    <div id="slider_border-radius" class="slider border-radius">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("自定义")</span>
                        <input type="text" class="form-control" id="border-radius-custom" onchange="updateDisplay()" />
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    @L("定位")
                </legend>
                <div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("定位")</span>
                        <select class="form-control" onchange="updateDisplay()" id="position">
                            <option value="">@L("默认")</option>
                            <option value="static">@L("静止")</option>
                            <option value="relative">@L("相对")</option>
                            <option value="absolute">@L("绝对")</option>
                            <option value="fixed">@L("固定")</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@(L("左边距离"))(px)</span>
                        <input type="text" class="form-control" id="position-left" onchange="updateDisplay()" />
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@(L("顶部距离"))(px)</span>
                        <input type="text" class="form-control" id="position-top" onchange="updateDisplay()" />
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@(L("右边距离"))(px)</span>
                        <input type="text" class="form-control" id="position-right" onchange="updateDisplay()" />
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@(L("底部距离"))(px)</span>
                        <input type="text" class="form-control" id="position-bottom" onchange="updateDisplay()" />
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("z-index")</span>
                        <input type="text" class="form-control" id="z-index" onchange="updateDisplay()" />
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    @L("其它")
                </legend>
                <div class="column">
                    <div class="input-group">
                        <span class="input-group-addon">@L("鼠标")</span>
                        <select class="form-control" onchange="updateDisplay()" id="cursor">
                            <option value="">@L("默认")</option>
                            <option value="crosshair">@L("十字")</option>
                            <option value="default">@L("指针")</option>
                            <option value="pointer">@L("手形")</option>
                            <option value="move">@L("移动")</option>
                            <option value="text">@L("光标")</option>
                            <option value="wait">@L("等待")</option>
                            <option value="help">@L("帮助")</option>
                            <option value="n-resize">@L("向上改变大小")</option>
                            <option value="s-resize">@L("向下改变大小")</option>
                            <option value="w-resize">@L("向左改变大小")</option>
                            <option value="e-resize">@L("向右改变大小")</option>
                            <option value="ne-resize">@L("向右上改变大小")</option>
                            <option value="nw-resize">@L("向左上改变大小")</option>
                            <option value="se-resize">@L("向右下改变大小")</option>
                            <option value="sw-resize">@L("向左下改变大小")</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("可见")</span>
                        <select class="form-control" onchange="updateDisplay()" id="visibility">
                            <option value="">@L("默认")</option>
                            <option value="visible">@L("可见")</option>
                            <option value="hidden">@L("隐藏")</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("超出")</span>
                        <select class="form-control" onchange="updateDisplay()" id="overflow">
                            <option value="">@L("默认")</option>
                            <option value="visible">@L("可见")</option>
                            <option value="hidden">@L("隐藏")</option>
                            <option value="scroll">@L("滚动")</option>
                            <option value="auto">@L("自动")</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">@L("浮动")</span>
                        <select class="form-control" onchange="updateDisplay()" id="float">
                            <option value="">@L("默认")</option>
                            <option value="left">@L("左浮动")</option>
                            <option value="right">@L("右浮动")</option>
                            <option value="none">@L("无")</option>
                        </select>
                    </div>
                </div>
            </fieldset>
        </div>

    </div>
    <div id="preview">
        <div class="panel-body">
            <div class="panel panel-default">
                <div class="panel-heading clearfix">
                    <span class="badge">@L("预览")</span>
                </div>
                <div style="background: #212636; padding: 10px;">
                    <div id="CSS-Display">
                        <div>
                            @L("传统的建站，网站所有区域的内容都是固定的，不可改变的，不能够随心所欲的改变页面的结构，布局。")
                            @L("而使用ZKEACMS，您可以对网页进行任意的区域划分，每个区域都可随意添加内容。")
                            <br> 
                            @L("您还可以向布局中添加共用的内容，这样所有应用这个布局的页面都会有相同的内容，而不用重复制添加。")
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <pre id="output" class="prettyprint lang-css prettyprinted"></pre>
                </div>
            </div>
        </div>
    </div>
</div>